<!--
/**
 * @author xuyh0817
 * @email xuyh0817@foxmail.com
 * @date 2022-02-19 15:44
 * @version 2.0.0
 * @doc todo
 * @website todo
 * @remark  如果要分发源码，需在本文件顶部保留此文件头信息！！
 */
 -->
<template>
  <a-form-model-item
    class="x-render-ant-form-item"
    v-bind="formItem"
    :rules="formItemRules"
    :style="formItemStyle"
    :label-col="formItemLabelCol"
    :wrapper-col="formItemWrapperCol"
  >
    <div class="x-render-form-item-component" v-if="!hasSlot(formItem.prop + slotWrapperSuffix)">
      <component
        :is="componentType"
        :value="componentValue"
        v-bind="data"
        v-on="$listeners"
      />
    </div>

    <x-render-extend-slot
      v-else
      :componentFunc="getSlot(formItem.prop + slotWrapperSuffix)"
      :data="data"
      :value="componentValue"
    ></x-render-extend-slot>
  </a-form-model-item>
</template>

<script>
import { COMPONENT_TYPE, SLOT_WRAPPER_SUFFIX } from '../../constants'
import ExtendSlotMixin from '../../XRenderMixins/XRenderExtendSlotMixin'

export default {
  name: COMPONENT_TYPE.FORM_ITEM,
  mixins: [ExtendSlotMixin],
  props: {
    formData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    componentType: {
      get() {
        const { data } = this
        if (data.type) {
          return data.type
        }
        return COMPONENT_TYPE.ERROR
      }
    },
    componentValue: {
      get() {
        const { formItem, formData } = this
        const prop = formItem.prop
        if (prop) {
          return formData[prop]
        }
        return ''
      }
    },
    formItem: {
      get() {
        const { data } = this
        const { formItem } = data || {}
        return formItem || {}
      }
    },
    formItemRules: {
      get() {
        const { isDebug, formItem } = this
        const rules = formItem.rules
        if (rules) {
          if (typeof (rules) === 'string') {
            return (new Function('return ' + rules))()
          }
          if (typeof (rules) === 'object') {
            return rules
          }
          if (isDebug) {
            throw new Error(`${formItem.prop}:类型不正确 ${typeof (rules)}, 请检查`)
          }
        }
        return []
      }
    },
    formItemLabelCol: {
      get() {
        return {
          span: 3
        }
      }
    },
    formItemWrapperCol: {
      get() {
        return {
          span: 21
        }
      }
    },
    formItemStyle: {
      get() {
        const { formItem } = this
        const labelWidth = formItem.labelWidth || 100
        const wrapperWidth = `calc( 100% - ${labelWidth}px )`
        return {
          'grid-template-columns': `0 ${labelWidth}px ${wrapperWidth} 0`
        }
      }
    },
    // 包装插槽的后缀
    slotWrapperSuffix: {
      get() {
        return SLOT_WRAPPER_SUFFIX
      }
    }
  }
}
</script>

<style scoped lang="css">
.x-render-form-item-component {
  width: 100%;
  padding: 0 4px;
}

.x-render-ant-form-item {
  display: grid !important;
  grid-auto-flow: column !important;
}


/deep/ .ant-form-item-label {
  width: 100% !important;
}

/deep/ .ant-form-item-control-wrapper {
  width: 100% !important;
}

</style>
